<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统中心</el-breadcrumb-item>
      <el-breadcrumb-item>借贷管理</el-breadcrumb-item>
      <el-breadcrumb-item>还款管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
    <el-row>
      <el-form :model="userForm" label-width="70px">
        <el-col :span="5">
          <el-form-item label="姓名">
<!--            <el-input placeholder="借款方" v-model="userForm.fullName"></el-input>-->
            <el-input placeholder="借款方" v-model="obj.fullName"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <el-button type="info" plain @click="search()">搜索</el-button>
    </el-row>
    <el-table
      :data="backpaylist"
      style="width: 100%">
      <el-table-column
        align="center"
        type="index"
        label="编号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="fullName"
        label="借款人"
        >
      </el-table-column>
      <el-table-column
        align="center"
        prop="tel"
        label="借款人手机"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="bidName"
        label="标名"
       >
      </el-table-column>
      <el-table-column
        align="center"
        prop="totalAmount"
        label="借款金额"
        >
      </el-table-column>
      <el-table-column
        align="center"
        prop="repayType"
        label="还款方式"
        >
        <template slot-scope="scope">
          {{scope.row.repayType|repayTypeFit}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="trem"
        label="总期数"
        >
        <template slot-scope="scope">
          {{scope.row.trem}}
<!--          {{scope.row.termType|tremTypeFit}}-->
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-dropdown size="mini" split-button type="primary" trigger="click">
            操作
            <el-dropdown-menu slot="dropdown">
              <!--<el-dropdown-item @click.native="getPay(scope.row.id)">还款记录</el-dropdown-item>-->
              <el-dropdown-item @click.native="getPay(scope.row.id)">还款计划</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
      <el-dialog title="还款计划" :visible.sync="TouzidialogTableVisible">
        <el-table :data="getPayList">
          <el-table-column type="index" property="index"  width="150"></el-table-column>
          <el-table-column property="repayNum" label="还款总期数" width="150"></el-table-column>
          <el-table-column property="repayNo" label="还款期号" width="150">
            <template slot-scope="scope">
              {{scope.row.repayNo|repayNoFit(val,1)}}
            </template>7
          </el-table-column>
          <el-table-column property="repaydate" label="还款日期" width="200">
            <template slot-scope="scope">
              {{scope.row.repaydate | datefmt('YYYY-MM-DD HH:mm:ss')}}
            </template>
          </el-table-column>
          <el-table-column property="repayAmount" label="应还金额"></el-table-column>
          <el-table-column property="capital" label="本金金额"></el-table-column>
          <el-table-column property="interest" label="利息金额"></el-table-column>
          <el-table-column property="dueDay" label="逾期天数">
            <template slot-scope="scope">
              {{scope.row.dueDay | dueDayFit}}
            </template>
          </el-table-column>
          <el-table-column property="status" label="状态" width="150">
            <template slot-scope="scope">
              {{scope.row.status | statusfit}}
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

    <el-pagination
      align="center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
  </div>
</template>
<script>
  export default {
    name: "payback",
    data(){
      return{
        obj:{},//模糊对象
        TouzidialogTableVisible:false,
        backpaylist:[],
        AddScore:{},
        getPayList:[],
        ScoredialogFormVisible:false,
        page:{
          pagenum:0,
          pagesize:5
        },
        status:'1',
        isShow:false,
        total:0,
        fullName:'',
        userid:'',
        rolelist:[],
        roleIds:{},
        centerDialogVisible:false,
        userDialogVisible:false,
        importExcelVisible:false,
        auth:{token:''},
        userForm:{},
        BorrowerId:null,
      }
    },
    methods:{
      getPay:function(id){
        this.$router.push("/repaybackplan?id="+id);
      },
      handleSizeChange:function (val) {
        this.page.pagesize=val;
        this.search();
      },
      handleCurrentChange:function (val) {
        this.page.pagenum=val;
        this.search();
      },
      search:function () {
        this.$http.post("/finance-service-borrowing/loan/getBorrowerList/"+this.page.pagenum+"/"+this.page.pagesize,this.obj).then(
          (res)=>{
            this.backpaylist=res.data.result.list;
            this.total=res.data.result.total;
          }
        )
      },
    },
    mounted() {
      this.search();
      this.auth.token=sessionStorage.getItem("token");
    },
    filters:{
      repayTypeFit:function(val){//还款方式
        if(val==0){
          return "一次性还款";
        }
        if(val==1){
          return "等额本金";
        }
        if(val==2){
          return "等额本息";
        }
      },
      idduefit:function (val) {
        if (val==0){
          return "否";
        }
        if (val==1){
          return "是"
        }
      },
      statusfit:function(val){
        if (val==0){
          return "待还款";
        }
        if (val==1){
          return "已还款";
        }
        if (val==2){
          return "逾期";
        }
      },
      repayTypeFit:function (val) {
        if (val==0){
          return "支付宝";
        }
        if (val==1){
          return "微信";
        }
        if (val==2){
          return "银联";
        }
      },
      dueDayFit:function (val) {
        if (val==null || val==''){
          return "未逾期";
        }
        if (val!=null){
          return val;
        }
      }
    }
  }
</script>

<style scoped>

</style>
